<!--
  * 服务地址
  *
  * @Author:    zhang
  * @Date:      2024-09-21 16:11:15
  * @Copyright  tn
-->
<template>
    <a-modal
        :title="form.id ? '编辑' : '添加'"
        :width="400"
        :open="visibleFlag"
        @cancel="onClose"
        :maskClosable="false"
        :destroyOnClose="true"
    >
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }" >
          <a-form-item label="ip"  name="ip">
            <a-input style="width: 100%" v-model:value="form.ip" placeholder="ip" />
          </a-form-item>
          <a-form-item label="登录地址"  name="loginUrl">
            <a-input style="width: 100%" v-model:value="form.loginUrl" placeholder="登录地址" />
          </a-form-item>
          <a-form-item label="端口"  name="port">
            <a-input style="width: 100%" v-model:value="form.port" placeholder="端口" />
          </a-form-item>
          <a-form-item label="账号"  name="username">
            <a-input style="width: 100%" v-model:value="form.username" placeholder="账号" />
          </a-form-item>
          <a-form-item label="密码"  name="pwd">
            <a-input style="width: 100%" v-model:value="form.pwd" placeholder="密码" />
          </a-form-item>
      </a-form>
  
      <template #footer>
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-space>
      </template>
    </a-modal>
  </template>
  <script setup>
    import { reactive, ref, nextTick } from 'vue';
    import _ from 'lodash';
    import { message } from 'ant-design-vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import { serverUrlApi } from '/@/api/monitoringConfiguration/index';
    import { smartSentry } from '/@/lib/smart-sentry';
  
    // ------------------------ 事件 ------------------------
  
    const emits = defineEmits(['reloadList']);
  
    // ------------------------ 显示与隐藏 ------------------------
    // 是否显示
    const visibleFlag = ref(false);
  
    function show(rowData) {
      Object.assign(form, formDefault);
      if (rowData && !_.isEmpty(rowData)) {
        Object.assign(form, rowData);
      }
      // 使用字典时把下面这注释修改成自己的字典字段 有多个字典字段就复制多份同理修改 不然打开表单时不显示字典初始值
      // if (form.status && form.status.length > 0) {
      //   form.status = form.status.map((e) => e.valueCode);
      // }
      visibleFlag.value = true;
      nextTick(() => {
        formRef.value.clearValidate();
      });
    }
  
    function onClose() {
      Object.assign(form, formDefault);
      visibleFlag.value = false;
    }
  
    // ------------------------ 表单 ------------------------
  
    // 组件ref
    const formRef = ref();
  
    const formDefault = {
        id:undefined,
        ip: undefined, //ip
        loginUrl: undefined, //登录地址
        port: undefined, //端口
        username: undefined, //账号
        pwd: undefined, //密码
    };
  
    let form = reactive({ ...formDefault });
  
    const rules = {
        ip: [{ required: true, message: 'ip 必填' }],
        loginUrl: [{ required: true, message: '登录地址 必填' }],
        port: [{ required: true, message: '端口 必填' }],
        username: [{ required: true, message: '账号 必填' }],
        pwd: [{ required: true, message: '密码 必填' }],
    };
  
    // 点击确定，验证表单
    async function onSubmit() {
      try {
        await formRef.value.validateFields();
        save();
      } catch (err) {
        message.error('参数验证错误，请仔细填写表单数据!');
      }
    }
  
    // 新建、编辑API
    async function save() {
      SmartLoading.show();
      try {
        if (form.id) {
          await serverUrlApi.update(form);
        } else {
          await serverUrlApi.add(form);
        }
        message.success('操作成功');
        emits('reloadList');
        onClose();
      } catch (err) {
        smartSentry.captureError(err);
      } finally {
        SmartLoading.hide();
      }
    }
  
    defineExpose({
      show,
    });
  </script>
  